<template>
    <div class="content">
        <div class="box">
            <span :style="{ '--i': 0 }"></span>
            <span :style="{ '--i': 1 }"></span>
            <span :style="{ '--i': 2 }"></span>
            <span :style="{ '--i': 3 }"></span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isFold: false,
        };
    },
    methods: {
        handleClick() {
            this.isFold = !this.isFold;
        },
    },
};
</script>

<style scoped>
.content {
    width: 1000px;
    height: 600px;
    background: wheat;
    display: flex;
    align-content: center;
    justify-content: center;
    margin: 0 auto;
}
.box {
    display: flex;
    width: 640px;
    height: 360px;
    transform: rotate(-25deg) skew(25deg);
    margin-top: 100px;
}
.box span {
    width: 25%;
    height: 100%;
    background: skyblue;
    display: block;
    border-top: 5px solid #fff;
    border-bottom: 5px solid #fff;
    /*将4个span换成4个背景图 */
    background: url(../assets/images/yuji.jpg);
    background-size: cover;
    /* 基于css变量，设置背景定位 */
    background-position: calc(-160px * var(--i));
    /* 设置span过渡效果 */
    transition: 0.5s;
}

/* 设置首尾边框，完善相片边框效果 */
.box span:first-child {
    border-left: 5px solid #fff;
}
.box span:last-child {
    border-right: 5px solid #fff;
}
/* 设置折叠盒子动效 */
/* 选中时，span折叠，设置阴影 */
/* nth-child(odd) 奇数行产生效果，与2n+1效果一致 */
.box:hover span:nth-child(odd) {
    transform: skewY(25deg);
    box-shadow: inset 20px 0 50px rgba(0, 0, 0, 0.5);
}
/* nth-child(even) 偶数产生效果，与2n效果一致 */
.box:hover span:nth-child(even) {
    transform: skewY(-25deg);
    box-shadow: inset 20px 0 50px rgba(0, 0, 0, 0.5);
}
</style>
